import { classString } from "../__use/dom";
import { color } from "../basic/ee-theme";

/** 创建 props 带默认值的组件
 * @param {color} color
 * @param {boolean} label
 * @param {boolean} border
 * @param {boolean} button
 * @param {boolean} plain
 */
export function withDefault(color, label, border, button, plain) {
  return {
    props: {
      /** 要使用的颜色主题，主题可以使用@/basic/ee-color的color方法来创建 */
      color: {
        type: String,
        default: color,
      },
      /** 文字 + 背景 */
      label: {
        type: Boolean,
        default: !!label,
      },
      /** 带边框 */
      border: {
        type: Boolean,
        default: !!border,
      },
      /** 按钮 */
      button: {
        type: Boolean,
        default: !!button,
      },
      /** 浅色方案 */
      plain: {
        type: Boolean,
        default: !!plain,
      },
    },
    computed: {
      /** 颜色主题的 class 样式字符串，前后不包含空格
       * @example
       * <div :class="'other ' + colorString" />
       */
      colorString() {
        const { color, label, border, button, plain } = this;
        return classString({ color, label, border, button, plain }, 'eec')
      },
      /** 颜色主题的 class 样式对象，如 { 'eec-primary-button': 1 }
       * @example
       * <div :class="{...colorObject}" />
       */
      colorObject() {
        const o = {};
        const c = this.colorString;
        if (c)
          o[c] = 1;
        return o;
      }
    }
  }
}
/** 继承后使用 colorString 或 colorObject 来设置样式 */
export default withDefault();